	//获取页面元素
  var singDiv = document.getElementById("singleDiv");
  var maskDiv = document.getElementById("mask");
  var bigDiv = document.getElementById("bigDiv");
  var bigImg = document.getElementById("big");
  /*
   * 一.放大镜部分
   */
  //鼠标移入事件
  singDiv.onmouseenter = function() {
      maskDiv.style.display = "block";
      bigDiv.style.display = "block";
      //计算比例
      var scaleX = (bigDiv.offsetWidth - bigImg.offsetWidth) / (singDiv.offsetWidth - maskDiv.offsetWidth);
      var scaleY = (bigDiv.offsetHeight - bigImg.offsetHeight) / (singDiv.offsetHeight - maskDiv.offsetHeight);
      document.onmousemove = function(event) {
        var even = event || window.event;
        /*
         * 一.修改 maskDiv 的 left,top
         */
        // 光标到浏览器左端/顶端的距离
        var x = even.clientX;
        var y = even.clientY;
        // 元素到 浏览器左端/顶端的距离
        var leftX = singDiv.offsetParent.offsetLeft;
        var topY = singDiv.offsetParent.offsetTop;
        // 遮罩的大小
        var width = maskDiv.offsetWidth;
        var height = maskDiv.offsetHeight;
        //计算 遮罩的 left 和 top
        var maskLeft = x - leftX - width / 2;
        var maskTop = y - topY - height / 2;
        //边界限制
        //水平方向
        if (maskLeft >= singDiv.offsetWidth - maskDiv.offsetWidth) {
          maskLeft = singDiv.offsetWidth - maskDiv.offsetWidth;
        }
        // 水平方向 最小限制(最小不小于 0)
        if (maskLeft <= 0) {
          maskLeft = 0;
        }
        // 垂直方向 最大控制(最大不超过 singDiv.offsetHeight - maskDiv.offsetHeight
        if (maskTop >= singDiv.offsetHeight - maskDiv.offsetHeight) {
          maskTop = singDiv.offsetHeight - maskDiv.offsetHeight;
        }
        // 垂直方向 最小控制(最小不小于 0)
        if (maskTop <= 0) {
          maskTop = 0;
        }
        // 赋值(修改 maskDiv 的 left/top)
        maskDiv.style.left = maskLeft + "px";
        maskDiv.style.top = maskTop + "px";
        /*
         * 二, 修改 bigImg 的 left, top
         */
        bigImg.style.left = maskLeft * scaleX + "px";
        bigImg.style.top = maskTop * scaleY + "px";
      }
    }
    //鼠标移出事件	
  singDiv.onmouseleave = function() {
      maskDiv.style.display = "none";
      bigDiv.style.display = "none";
    }
    /*
     * 二.轮播图部分
     */
  var conDiv = document.getElementById("conDiv");
  var leftBtn = document.getElementById("left");
  var rightBtn = document.getElementById("right");
  var imgs = conDiv.getElementsByTagName("img");
  var smallImg = document.getElementById("small");
  /*
   * 1, leftBtn 关联点击事件
   */
  leftBtn.onclick = function() {
      // 在 原 left 值的基础上 增加 130, conDiv 往右走
      var left = conDiv.offsetLeft + 130;
      // 边界控制
      if (left >= 0) {
        left = 0;
      }
      conDiv.style.left = left + "px";
    }
    /*
     * 2, rightBtn 关联点击事件
     */
  rightBtn.onclick = function() {
      // 在 原 left 值的基础上 减少 130, conDiv 往左走
      var left = conDiv.offsetLeft - 130;
      // 边界控制
      if (left <= singDiv.offsetWidth - conDiv.scrollWidth) {
        left = singDiv.offsetWidth - conDiv.scrollWidth;
      }
      conDiv.style.left = left + "px";
    }
    /*
     * 3, img 关联鼠标移入事件
     */
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function() {
      // 修改 smallImg 图片
      smallImg.src = this.getAttribute("src"); // 亦可使用 this.src
      // 修改 bigImg 图片
      bigImg.src = this.src;
      // 修改 当前 图片的 class
      for (var j = 0; j < imgs.length; j++) {
        if (this == imgs[j]) {
          imgs[j].className = "select";
        } else {
          imgs[j].className = "";
        }
      }
    }
  }